import React, { useState, useEffect,useRef} from 'react'
import "./Cart.css"
import { Space } from 'react-vant'
import { Down } from '@react-vant/icons'
import { Input, Button } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { EnvironmentOutline, ClockCircleOutline, BillOutline } from 'antd-mobile-icons'
import { useLocation } from "react-router-dom"
import DeepCopy from './DeepCopy'

export default function Cart() {
    const navigate = useNavigate()
    const location = useLocation()
    const [newData, setNewData] = useState(DeepCopy({}, location.state))
    const ins= useRef(null)
    const [values, setValues] = useState(((newData.distance / 1000)*1.4).toFixed(2));
    useEffect(() => {
        localStorage.setItem("data", JSON.stringify(newData))
    }, [location.state])

    const [text, setText] = useState("");

    useEffect(() => {
        if (location.state.text != "") {
            setText(location.state.text);
        } else {
            setText("");
        }
    }, [location.state])

    const change = (price) => {
        setValues(price)
    }

    const times = () => {
        function secondsToHoursMinutes(seconds) {
            // 计算总小时数
            const totalHours = Math.floor(seconds / 3600);
            // 计算剩余的分钟数
            const minutes = Math.floor((seconds % 3600) / 60);

            // 构建输出字符串
            let result = "";
            if (totalHours > 0) {
                result += `${totalHours}小时`;
            }
            if (minutes > 0) {
                result += `${minutes}分钟`;
            }

            // 如果小时和分钟都为0，则特殊处理
            if (result === "") {
                result = "0分钟";
            }
            return result;
        }

        // 折扣因子
        const discountFactor = {
            6: 0.6,
            7: 0.7,
            8: 0.8,
            9: 0.9
        };

        // 检查是否有对应的折扣因子
        if (discountFactor[text]) {
            // 计算折扣后的时间
            const discountedTime = newData.time * discountFactor[text];
            // 将折扣后的时间转换为小时和分钟
            let time = secondsToHoursMinutes(discountedTime);

            return time
        } else {
            // 使用原来的时间
            let time = secondsToHoursMinutes(newData.time);

            return time
        }


    }



    return (
        <div className="box">
            <div className="top">
                <div className="return">
                    <span className="icon">
                        <Space gap={20}>
                            <Down className="leftIcon" onClick={() => { navigate("/all/home") }} />
                        </Space>
                    </span>
                    <span className="top-cart">选择汽车</span>
                </div>
            </div>
            <div className="top-text">
                选择您要乘坐的车辆类别。
            </div>
            <div className="choose-cart">
                <div className="body-cart">
                    <div className="body-cart-left"><img src="../img/每日特惠.svg" alt="" /></div>
                    <div className="body-cart-center"><p>特惠</p><p>7附近</p></div>
                    <div className="body-cart-right">
                        <div>¥{((newData.distance / 1000)*1.4).toFixed(2)}</div>
                        <div><input type="radio" value={values} onChange={() => { change(((newData.distance / 1000)*1.4).toFixed(2)) }} checked={values === ((newData.distance / 1000)*1.4).toFixed(2) ? true : false} className="radio" id="a1" name="a" /></div>
                    </div>
                </div>
                <div className="body-cart">
                    <div className="body-cart-left"><img src="../img/打车.svg" alt="" /></div>
                    <div className="body-cart-center"><p>快车</p><p>9附近</p></div>
                    <div className="body-cart-right">
                        <div>¥{((newData.distance / 1000)*1.5).toFixed(2)}</div>
                        <div><input type="radio" value={values} onChange={() => { change(((newData.distance / 1000)*1.5).toFixed(2)) }} checked={values === ((newData.distance / 1000)*1.5).toFixed(2)  ? true : false} className="radio" id="a2" name="a" /></div>
                    </div>
                </div>
                <div className="body-cart">
                    <div className="body-cart-left"><img src="../img/专车认证.svg" alt="" /></div>
                    <div className="body-cart-center"><p>专车</p><p>4附近</p></div>
                    <div className="body-cart-right">
                        <div>¥{((newData.distance / 1000)*1.6).toFixed(2)}</div>
                        <div><input type="radio" value={values} onChange={() => { change(((newData.distance / 1000)*1.6).toFixed(2)) }} checked={values === ((newData.distance / 1000)*1.6).toFixed(2) ? true : false} className="radio" id="a3" name="a" /></div>
                    </div>
                </div>
            </div>
            <div className="encode">
                <div className="encode-top">优惠兑换码</div>
                <div className="encode-bottom">
                    <div className={text != "" ? "encode-bottom-show" : "encode-bottom-input"}>
                        <Input
                            placeholder='输入优惠兑换码'
                            onFocus={() => {
                                navigate("/vouchers", { state: newData })
                            }}
                        />
                    </div>
                    <div className={text != "" ? "encode-price" : "encode-bottom-show"} onClick={() => { navigate("/vouchers") }}>
                        <span>折扣{text * 10}%</span>
                    </div>
                    {/* <div className="encode-bottom-button" onClick={()=>{navigate("/vouchers")}}>+</div> */}
                </div>
            </div>
            <div className="distance">
                <div className="distance-son">
                    <Space wrap align='center'>
                        <EnvironmentOutline fontSize={21} color='rgb(176, 176, 176)' />
                    </Space>
                    <span>{(newData.distance / 1000).toFixed(2)}km</span>
                </div>
                <div className="distance-son">
                    <Space wrap align='center'>
                        <ClockCircleOutline fontSize={21} color='rgb(176, 176, 176)' />
                    </Space>
                    <span>{times()}</span>
                </div>
                <div className="distance-son">
                    <Space wrap align='center'>
                        <BillOutline fontSize={21} color='rgb(176, 176, 176)' />
                    </Space>
                    <span ref={ins}>¥{text != "" ? (values * (text / 10)).toFixed(0) : values}</span>
                </div>
            </div>
            <div className="bottom-button">
                <Button block
                onClick={() =>{
                    navigate("/driver")
                    localStorage.setItem('price',Number(ins.current.innerText.slice(1)))
                }}
                color='primary' size='large'>
                    继续
                </Button>
            </div>
        </div>
    )
}
